<!DOCTYPE html>
<html lang="ch">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" href="css/swiper.min.css">		
		<script src="js/swiper.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<title></title>
	</head>
	<body>
	    <div class="conditionList">
			<div class="conditionList_con">
				<div class="conditionList_one">
					<p>本地关机</p>
					<p>本地1级光</p>
					<p style="color: #b12f41">远程2级光 <span><img class="float_r" src="img/conditionList_icon_s.png" style="margin-top: 16px;width: 13px"></span></p>
					<p>本地3级光</p>
					<p>远程关机</p>
					<p>本地3级光</p>
				</div>
			</div>
		</div>
		<div class="nav_con">
			<img class="nav_icon float_l" src="img/nav_icon_bar@2x.png"> 某某某项目
			<img class="nav_icon float_r" src="img/nav_icon_set@2x.png">
			<div class="clear"></div>
		</div>
		<div class="cd_nr">
			<div class="banner_con">
				<div class="banner">
					<div class="banner_weather">温度：28°C 湿度：37%</div>
					<div class="swiper-container">
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<img class="banner_img" src="img/14.png">
							</div>
							<div class="swiper-slide">
								<img class="banner_img" src="img/14.png">
							</div>
							<div class="swiper-slide">
								<img class="banner_img" src="img/14.png">
							</div>
							<div class="swiper-slide">
								<img class="banner_img" src="img/14.png">
							</div>
							<div class="swiper-slide">
								<img class="banner_img" src="img/14.png">
							</div>
						</div>
					</div>
					<div class="banner_bot">
						<img class="float_l" src="img/icon_position.png" style="width: 15px;">
						<p class="float_l">湖南省长沙市黄花机场</p>
						<p class="float_r">1/5</p>
						<div class="clear"></div>
					</div>
				</div>
			</div>
			<div class="pic_con">
				<div class="pic_but">
					<p class="pic_but_l float_l">上位机上传图集</p>
					<div class="pic_but_r float_r">
						<p class="pic_but_r_l float_l">展开</p>
						<img class="float_l pic_but_r_r" src="img/icon_open@2x.png">
						<div class="clear"></div>
					</div>
				</div>
				<div class="swiper-con" style="position: relative;overflow: hidden;display: none;">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<div class="pic_atlas_con">
								<div class="pic_top">
									<div class="pic_l_con float_l">
										<div class="pic_ping_l">
											<img class="pic_l" src="img/15.png">
										</div>
									</div>
									<div class="pic_r_con float_l">
										<div class="pic_ping_r">
											<img class="pic_r" src="img/15.png">
										</div>
									</div>
									<div class="clear"></div>
								</div>
								<div class="pic_bot">
									<div class="pic_l_con float_l">
										<div class="pic_ping_l">
											<img class="pic_l" src="img/15.png">
										</div>
									</div>
									<div class="pic_r_con float_l">
										<div class="pic_ping_r">
											<img class="pic_r" src="img/15.png">
										</div>
									</div>
									<div class="clear"></div>
								</div>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="pic_atlas_con">
								<div class="pic_top">
									<div class="pic_l_con float_l">
										<div class="pic_ping_l">
											<img class="pic_l" src="img/15.png">
										</div>
									</div>
									<div class="pic_r_con float_l">
										<div class="pic_ping_r">
											<img class="pic_r" src="img/15.png">
										</div>
									</div>
									<div class="clear"></div>
								</div>
								<div class="pic_bot">
									<div class="pic_l_con float_l">
										<div class="pic_ping_l">
											<img class="pic_l" src="img/15.png">
										</div>
									</div>
									<div class="pic_r_con float_l">
										<div class="pic_ping_r">
											<img class="pic_r" src="img/15.png">
										</div>
									</div>
									<div class="clear"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="swiper-pagination"></div>
				</div>
			</div>
			<div class="conList_con">
				<div class="conList_title">
					<p class="conList_name float_l">项目控制器</p>
					<p class="float_l conList_tole">100</p>
					<p class="float_r conList_tole_nub">99/<span>1</span></p>
					<div class="clear"></div>
				</div>
				<div class="conList_ser">
					<img class="conList_ser_icon float_l" src="img/icon_search@2x.png">
					<input class="float_l" placeholder="搜索项目">
					<div class="clear"></div>
				</div>
				<div class="conList_condition">
					<div class="conList_ping float_l">
						<div class="centered">
							<div class="conList_condition_name float_l">环境光状态</div>
							<img class="float_l" src="img/icon_tiao.png" style="width: 8px; margin-left: 4px;margin-top: 14px">
							<div class="clear"></div>
						</div>
					</div>
					<div class="conList_ping float_l">
						<div class="centered">
							<div class="conList_condition_name float_l" style="color: #b12f41">远程2级光</div>
							<img class="float_l" src="img/icon_tiao_s.png" style="width: 8px; margin-left: 4px;margin-top: 14px">
							<div class="clear"></div>
						</div>
					</div>
					<div class="conList_ping float_l">
						<div class="centered">
							<div class="conList_condition_name float_l">控制器状态</div>
							<img class="float_l" src="img/icon_tiao.png" style="width: 8px; margin-left: 4px;margin-top: 14px">
							<div class="clear"></div>
						</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="conList">
					<P class="float_l conList_nub">001</P>
					<div class="conList_top float_r">
						<img class="conList_state_icon float_l" src="img/state_icon_night@2x.png">
						<p class="conList_voltage float_l">220v </p>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
					<p class="float_l conList_det">远程配置闪光持续时间</p>
					<p class="float_r conList_state">正常</p>
					<div class="clear"></div>
				</div>
				<div class="conList">
					<P class="float_l conList_nub">001</P>
					<div class="conList_top float_r">
						<img class="conList_state_icon float_l" src="img/state_icon_night@2x.png">
						<p class="conList_voltage float_l">220v </p>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
					<p class="float_l conList_det">远程配置闪光持续时间</p>
					<p class="float_r conList_state">正常</p>
					<div class="clear"></div>
				</div>
				<div class="conList">
					<P class="float_l conList_nub">001</P>
					<div class="conList_top float_r">
						<img class="conList_state_icon float_l" src="img/state_icon_night@2x.png">
						<p class="conList_voltage float_l">220v </p>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
					<p class="float_l conList_det">远程配置闪光持续时间</p>
					<p class="float_r conList_state">正常</p>
					<div class="clear"></div>
				</div>
				<div class="conList">
					<P class="float_l conList_nub">001</P>
					<div class="conList_top float_r">
						<img class="conList_state_icon float_l" src="img/state_icon_night@2x.png">
						<p class="conList_voltage float_l">220v </p>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
					<p class="float_l conList_det">远程配置闪光持续时间</p>
					<p class="float_r conList_state">正常</p>
					<div class="clear"></div>
				</div>
				<div class="conList">
					<P class="float_l conList_nub">001</P>
					<div class="conList_top float_r">
						<img class="conList_state_icon float_l" src="img/state_icon_night@2x.png">
						<p class="conList_voltage float_l">220v </p>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
					<p class="float_l conList_det">远程配置闪光持续时间</p>
					<p class="float_r conList_state">正常</p>
					<div class="clear"></div>
				</div>
			</div>
			<script>
				var mySwiper = new Swiper('.swiper-container', {
					direction: 'horizontal', // 垂直切换选项
					loop: true, // 循环模式选项
					roundLengths: true,
					slidesPerView: "auto",
					centeredSlides: true,
					autoplay: {
						delay: 1700,
					},

					// 如果需要分页器
					pagination: {
						el: '.swiper-pagination',
					},

					// 如果需要前进后退按钮
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev',
					},

					// 如果需要滚动条
					scrollbar: {
						el: '.swiper-scrollbar',
					},
				})
				var mySwiper = new Swiper('.swiper-con', {
					direction: 'horizontal', // 垂直切换选项
					loop: true, // 循环模式选项

					// 如果需要分页器
					pagination: {
						el: '.swiper-pagination',
					},

					// 如果需要前进后退按钮
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev',
					},

					// 如果需要滚动条
					scrollbar: {
						el: '.swiper-scrollbar',
					},
				})
			</script>
		</div>

	</body>

</html>